<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音播放</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
    <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">文本转语音</h1>

    <div class="mb-4">
        <label for="text" class="block text-gray-700 mb-2">输入文本：</label>
        <textarea id="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" rows="3">欢迎使用文本转语音功能</textarea>
    </div>

    <button id="generateBtn" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition duration-300 flex items-center justify-center mb-6">
        <i class="fa fa-microphone mr-2"></i> 生成语音
    </button>

    <div id="audioContainer" class="hidden">
        <h3 class="text-gray-700 mb-2">播放语音：</h3>
        <audio id="audioPlayer" controls class="w-full">
            您的浏览器不支持音频播放
        </audio>
    </div>

    <div id="loading" class="hidden text-center py-4">
        <i class="fa fa-spinner fa-spin text-blue-500 text-2xl"></i>
        <p class="mt-2 text-gray-600">正在生成语音...</p>
    </div>
</div>

<script>
    document.getElementById('generateBtn').addEventListener('click', function() {
        const text = document.getElementById('text').value.trim();
        const audioContainer = document.getElementById('audioContainer');
        const audioPlayer = document.getElementById('audioPlayer');
        const loading = document.getElementById('loading');

        if (!text) {
            alert('请输入文本内容');
            return;
        }

        // 显示加载状态
        loading.classList.remove('hidden');
        audioContainer.classList.add('hidden');

        // 构建请求URL
        const url = `/tts?text=${encodeURIComponent(text)}`;

        // 设置音频源
        audioPlayer.src = url;

        // 音频加载完成后隐藏加载状态，显示音频播放器
        audioPlayer.onloadeddata = function() {
            loading.classList.add('hidden');
            audioContainer.classList.remove('hidden');
        };

        // 加载失败处理
        audioPlayer.onerror = function() {
            loading.classList.add('hidden');
            alert('语音生成失败，请重试');
        };
    });
</script>
</body>
</html>
